<template>
  <!--  @ok="handleSubmit"-->

  <BasicModal v-bind="$attrs" @register="register" showFooter :title="getTitle" width="50%">
    <div style="display: flex; padding-left: 30px">
      <div style="width: 50%">
        <div
          ><span>供应商：</span> <span>{{ searchInfo.supplierName2 }}</span></div
        >
        <div><span>{{ searchInfo.num_title }}：</span> <span>{{ searchInfo.msTotalNum }}</span></div>
      </div>
      <div style="width: 50%">
        <div><span>物料编号：</span><span>{{ searchInfo.materialNoInsStr }}</span></div >
        <div><span>下单起始日期：</span><span>{{ searchInfo.orderDateStart }}</span></div>
        <div><span>下单截止日期：</span><span>{{ searchInfo.orderDateEnd }}</span></div>
      </div>
    </div>
    <vxe-grid ref="tableRef" v-bind="gridOptions" style="height: 350px;">
      <template #toolbar_buttons>
      </template>
    </vxe-grid>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, reactive, unref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTree, TreeItem } from '@/components/Tree';
  import {BasicTableProps, VxeTableDefines} from "@/components/VxeTable";

  import {
    purchaseOrderTableListApi,
    outsourceOrderTableListApi,
    getMouldItemsApi,
  } from '@/api/sys/msUser';
  import { BasicTable, useTable, TableAction, FormSchema } from '@/components/Table';
  import util from '@/utils/util';
  import { useMessage } from '@/hooks/web/useMessage';

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const treeData = ref<TreeItem[]>([]);
  const { createMessage } = useMessage();

  const clazzId = ref('');

  import { columns,detailSchema } from '../purchaseOrderList/role.data';

  const searchFormSchema: FormSchema[] = [
    {
      field: 'materialName',
      label: '物料名称',
      component: 'Input',
      colProps: { span: 8 },
    },
  ];

  const getTitle = ref('');

  const searchInfo = ref({});

  var tableCfg = {
    title: '',
    api: purchaseOrderTableListApi,
    immediate: false, //是否立即请求接口
    columns: columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
  };


  /**
   * 采购单明细
   */
  const gridOptions = reactive<BasicTableProps>({
    // keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    border: true,
    showOverflow: true,
    size: 'mini',
    height: 'auto', // 'auto'
    columns: columns,
    formConfig: {
      // enabled: true,
      items: detailSchema,
    },
    filterConfig: {
      remote: true,
    },
    expandConfig: {
      padding: true
    },
    showFooter: true,
    footerData: [
      { userName: '合计' }
    ],
    toolbarConfig: {
      slots: {
        buttons: 'toolbar_buttons',
      },
      refresh: true,
    },

    pagerConfig: {
      pageSize: 20,
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      filter: true,
      ajax: {
        query: ({ page, form, filters }) => {
          return findPageList(page, form, filters);
        },
      },
    },
  });

  function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
    let json = {};
    if (filterList && filterList.length) {
      filterList.forEach((e) => {
        const value = e.datas[0];
        let field = e.field;
        json[field + 'Like'] = value;
      });
    }
    // console.log("----json:", json);
    // ywApproveList xftList
    return purchaseOrderTableListApi({
      page: page.currentPage,
      pageSize: page.pageSize,
      ...searchInfo.value,
      ...form,
      ...json,
    });
  };
  const tableRef = ref();


  const [registerTable, { reload, setProps }] = useTable(tableCfg);

  const [register, { setModalProps, closeModal }] = useModalInner(async (data, type) => {
    console.log('--获取数据:', data);
    // console.log('--data:', type);
    let openType = data.openType; // type 1 看符合退款条件的数据 2 看已有的数据
    let list = data.items||[];
    let idArrs = [];
    list.forEach((row) => {
      idArrs.push(row.mtid);
    });
    let title = '采购单明细';
    if (data.isReturn == 2) {
      title = '外协加工单明细';
      let c_arr = util.copy(columns);
      c_arr[0] = '外协加工单号';
      tableCfg.columns = c_arr;
      tableCfg.api = outsourceOrderTableListApi;
    }
    getTitle.value = title;
    tableCfg.title = title;
    let orderNumMax = 0;
    let num_title = '';
    orderNumMax = data.returnConditionNum;
    if (data.totalNum) {
      orderNumMax = orderNumMax - data.totalNum;
    }
    //退款条件类别: 1一次性 2累计
    if (data.returnConditionType == 1) {
      num_title = '最大下单量';
    } else if (data.returnConditionType == 2) {
      num_title = '累计下单量';
    }
    tableCfg.searchInfo = {
      supplierId: data.supplierId,
      supplierName2: data.supplierName,
      orderCountType: data.returnConditionType,
      orderDateStart: data.startDate,
      orderDateEnd: data.endDate,
      materialNoInsStr: idArrs.join(','),
      msTotalNum:data.msTotalNum
    };

    if (data.returnConditionType == 1) {
    //  tableCfg.searchInfo.orderNumMax = orderNumMax;
    }
    if (idArrs.length == 0) {
      tableCfg.searchInfo.materialNoInsStr = '未绑定该物料编号';
    }
    searchInfo.value = tableCfg.searchInfo;
    searchInfo.value.num_title = num_title;
    // console.log("--searchInfo::",tableCfg.searchInfo)
    // setProps(tableCfg);
    //
    // reload();
    tableRef.value.commitProxy('query');
  });
</script>
